<template>
    <div>
        <Filters block :form="searchForm" :filterData="filterData" @confirm="changePage(1)" />
        <div class="container">
            <a-dropdown style="margin-right: 10px;" >
                <a-menu slot="overlay" @click="handleBatchType" style="max-height:300px;overflow: auto;">
                    <a-menu-item v-for="item in typeList" :key="item.value">{{item.label}}</a-menu-item>
                </a-menu>
                <a-button type="primary">批量分类</a-button>
            </a-dropdown>
            <a-dropdown style="">
                <a-menu slot="overlay" @click="handleBatchStatue">
                    <a-menu-item v-for="item in statueList" :key="item.value">{{item.label}}</a-menu-item>
                </a-menu>
                <a-button type="primary">批量修改状态</a-button>
            </a-dropdown>
            <DataTable rowKey="id" :tableData="Data" :rowSelection="{ selectedRowKeys: selectedGoods, onChange: changeSelection }" :tableColumn="tableColumn" :pageConfig="pageConfig"></DataTable>
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Watch, Vue } from 'vue-property-decorator'
@Component
export default class materialA extends Vue {
    searchForm: any = {
        searchValue: ''
    };
    statueList:any[]=[
        {
            label: '统计数据',
            value: '1'
        },
        {
            label: '不统计数据',
            value: '2'
        }
    ]
    typeList:any[] = []
    selectArr:any[] =[]
    get filterData () {
        return {
            searchValue: {
                label: '关键词',
                type: 'input',
                template: {
                    placeholder: '搜索物料编码/名称',
                    clearable: true
                }
            }
        };
    }
    selectedGoods:any[] = []
    Data: any[] = [{
        id: 1,
        code: '0000000',
        name: '物料分类名称',
        isState: true,
        classification: '分类'
    }]
    btns: any[] = [
        {
            label: '批量分类'
        },
        {
            label: '批量修改状态'
        }
    ];
    tableColumn: any = {
        code: {
            label: '物料编码',
            width: 120
        },
        name: {
            label: '物料名称',
            width: 150
        },
        assetFlag: {
            label: '是否统计数据',
            width: 150,
            type: 'switch',
            callback: this.setTurnAssetFlag
        },
        marbasclassName: {
            label: '当前所属分类',
            width: 150
        },
        typeId: {
            label: '设置分类',
            width: 150,
            type: 'select',
            options: this.typeList,
            callback: this.setMaterial
        }
    }
    pageConfig: any = {
        current: 1,
        total: 10,
        pageSize: 10,
        onChange: this.changePage
    };
    // 设置是否统计数据
    setTurnAssetFlag (val:any, index:any) {
        let object = Object.assign({}, val)
        if (object.assetFlag) {
            object.assetFlag = 'Y'
        } else {
            object.assetFlag = 'N'
        }

        let obj = {ncMaterielId: object.id, assetFlag: object.assetFlag}
        let data = {
            ncMaterielList: [obj]
        }
        this.setFlagApi(data)
    }
    // 设置状态api
    setFlagApi (data:any) {
        this.$api.assetSettingTurnAssetFlagFetch(data).then(res => {
            if (res.code == 0) {
                this.$message.success('操作成功');
                this.getListData()
            }
        }).catch()
    }
    // 批量设置分类
    handleBatchType (val:any) {
        if (this.selectArr.length == 0) {
            this.$message.error('请选择批量设置');
            return
        }
        this.selectArr.map((item:any) => {
            item.ncMaterielId = item.id
            item.typeId = val.key
            if (item.assetFlag) {
                item.assetFlag = 'Y'
            } else {
                item.assetFlag = 'N'
            }
        })

        let data = {
            ncMaterielList: this.selectArr
        }
        this.setMaterialApi(data)
    }
    // 批量设置状态
    handleBatchStatue (val:any) {
        let object:any = Object.assign([], this.selectArr)
        if (this.selectArr.length == 0) {
            this.$message.error('请选择批量设置');
            return
        }
        if (val.key == '1') {
            object.map((item:any) => {
                item.assetFlag = 'Y'
                item.ncMaterielId = item.id
            })
            let data = {
                ncMaterielList: object
            }
            this.setFlagApi(data)
        } else {
            object.map((item:any) => {
                item.assetFlag = 'N'
            })
            let data = {
                ncMaterielList: object
            }
            this.setFlagApi(data)
        }
    }
    // 设置分类
    setMaterial (val:any, index:any) {
        let obj = {
            ncMaterielId: this.Data[index].id,
            typeId: val
        }
        let data = {
            ncMaterielList: [obj]
        }
        this.setMaterialApi(data)
    }
    // 设置
    setMaterialApi (data:any) {
        this.$api.assetSettingMaterialSettingFetch(data).then(res => {
            if (res.code == 0) {
                this.$message.success('操作成功');
                this.getListData()
            }
        }).catch()
    }
    // 获取分类列表
    getTypeList () {
        this.$api.assetSettingTypeListFetch().then(res => {
            if (res.code == 0) {
                res.data.map((item:any) => {
                    let obj = {label: '', value: ''}
                    obj.label = item.settingName
                    obj.value = item.settingId
                    this.typeList.push(obj)
                })
            }
        }).catch()
    }
    // 获取列表数据
    getListData () {
        let data = {
            typeId: '',
            page: this.pageConfig.current,
            size: this.pageConfig.pageSize,
            // searchValue:this.searchForm.searchValue,
            code: this.searchForm.searchValue,
            ratio: 0
        }
        this.$api.assetSettingNcMaterielFetch(data).then(res => {
            if (res.code == 0) {
                this.pageConfig.total = res.data.total
                res.data.records.map((item:any) => {
                    if (item.assetFlag == 'Y') {
                        item.assetFlag = true
                    } else {
                        item.assetFlag = false
                    }
                })
                this.Data = res.data.records
            }
        }).catch()
    }
    init () {
        this.getTypeList()
        this.getListData()
    }
    changePage (val: number) {
        this.pageConfig.current = val;
        this.getListData()
    }
    changeSelection (selectedRowKeys: any, selectedRows: any[]) {
        this.selectedGoods = selectedRowKeys;
        this.selectArr = selectedRows
    }
}
</script>
<style lang="scss" scoped>

</style>
